<template>
  <el-dialog
    :visible="visible"
    title="事件详情"
    width="500px"
    :before-close="handleClose"
    class="event-detail-dialog"
  >
    <div class="event-detail-content">
      <div class="detail-item">
        <span class="label">事件标题：</span>
        <span class="content">{{ eventData.title }}</span>
      </div>
      
      <div class="detail-item">
        <span class="label">开始时间：</span>
        <span class="content">{{ formatDateTime(eventData.start) }}</span>
      </div>
      
      <div class="detail-item">
        <span class="label">结束时间：</span>
        <span class="content">{{ formatDateTime(eventData.end) }}</span>
      </div>
      
      <div class="detail-item">
        <span class="label">全天事件：</span>
        <span class="content">{{ eventData.allDay ? '是' : '否' }}</span>
      </div>
      
      <div class="detail-item">
        <span class="label">事件颜色：</span>
        <div class="color-block" :style="{ backgroundColor: eventData.backgroundColor }"></div>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleEdit">编辑</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from 'moment'

export default {
  name: 'EventDetailDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    event: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    eventData() {
      return {
        title: this.event.title || '',
        start: this.event.start || new Date(),
        end: this.event.end || new Date(),
        allDay: this.event.allDay || false,
        backgroundColor: this.event.backgroundColor || '#3788d8'
      }
    }
  },
  methods: {
    formatDateTime(date) {
      if (!date) return '';
      return this.eventData.allDay
        ? moment(date).format('YYYY-MM-DD')
        : moment(date).format('YYYY-MM-DD HH:mm');
    },
    handleClose() {
      this.$emit('update:visible', false);  // 使用 emit 更新父组件的值
    },
    handleEdit() {
      this.$emit('edit', this.event);
      this.handleClose();
    },
    handleDelete() {
      this.$confirm('确认删除该事件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete', this.event);
        this.handleClose();
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.event-detail-content {
  padding: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  
  .label {
    width: 100px;
    color: #606266;
    font-weight: 500;
  }
  
  .content {
    flex: 1;
    color: #303133;
  }
  
  .color-block {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }
}

:deep(.el-dialog__body) {
  padding: 0;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #e4e7ed;
}
</style>
